<style lang="less">

</style>
<template>
  <Modal
      v-model="drawer.show" transfer
      :title="lang.new"
      :width="width"
      :draggable="true"
      :mask-closable="false"
      @on-ok="ok">
    <span slot="header" :style="titleStyle">{{lang.new }}</span>
    <div v-if="drawer.show" style="min-height: 820px; height:820px;overflow-y: auto;overflow-x:hidden;margin: 10px;">
      <Form ref="_frm" :model="data" :rules="ruleValidate"
            :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="32">
          <Col span="12">
            <FormItem prop="type" :label="lang.type">
              <Select style="grid-area: b2" v-model="data.type" transfer :clearable="false">
                <Option v-for="item in typeList" :key="item.label" :value="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem prop="className" :label="lang.className">
              <Input v-model="data.className" :placeholder="lang.classNamePlaceholder" maxlength="50"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem prop="comments" :label="lang.comments">
              <Input v-model="data.comments" clearable :placeholder="lang.commentsPlaceholder"
                     type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
            </FormItem>
          </Col>
        </Row>
        <!-- <Row :gutter="32">
          <Col span="24">
            <Alert>{{ lang.modelProperties }}</Alert>
            <features ref="_features" :modelData="data"></features>
          </Col>
        </Row> -->
      </Form>
    </div>
  </Modal>
</template>
<script>
import features from "../../../parts/cfg-model-features";

export default {
  name: "cfgTemplateModelNewAddModal",
  components: {features},
  data() {
    return {
      collectionObject:null,
      classObject:null,
      data:{},
      modelType:"statTemplate",
      features: [],
      general: {
        status: {type: 'Boolean', defaultValue: false},
        name: {type: 'string', defaultValue: ""},
      },
      propInfo: {},
      values: {}
    }
  },
  props: {
    width: {
      default: () => {
        return 1024;
      }
    },
    zIndex: {
      default: () => {
        return 100;
      }
    },
    titleStyle: {
      default: () => {
        return {}
      }
    },
    drawer: {
      default: () => {
        return {
          show: false,
        };
      }
    },
  },
  computed: {
    labelWidth() {
      return 100;
    },
    labelPosition() {
      return 'right';
    },
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          detail: 'detail',
          action: 'action',
          submit: 'submit',
          type: 'type',
          typePlaceholder: 'Please select type',
          className: 'className',
          classNamePlaceholder: 'Please enter class name',
          version: 'version',
          versionPlaceholder: 'Please enter version',
          published: 'published',
          comments: 'comments',
          commentsPlaceholder: 'Please enter comments',
          modelProperties: 'Model Attribute Configuration',
          typeRuleMsg: 'Please select property type',
          classNameRuleMsg: 'Please enter class name'
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          detail: '查看',
          action: '操作',
          submit: '提交',
          type: '所属类型',
          typePlaceholder: '请选择所属类型',
          className: '模型类名',
          classNamePlaceholder: '请输入模型类名',
          version: '版本号',
          versionPlaceholder: '请输入版本号',
          published: '是否发布',
          comments: '说明',
          commentsPlaceholder: '请输入描述信息',
          modelProperties: '模型属性配置',
          typeRuleMsg: '请选择所属类型',
          classNameRuleMsg: '请输入模型类名'
        },
      }[this.G_Locale]
    },
    typeList() {
      return this.$modelObject.getModelType(this.modelType);
    },
    ruleValidate() {
      return {
        type: [
          {required: true, message: this.lang.typeRuleMsg, trigger: 'blur'}
        ],
        className: [
          {required: true, message: this.lang.classNameRuleMsg, trigger: 'blur'}
        ],
      }
    }
  },
  watch:{
    'drawer.show':function(){
      if(this.drawer.show){
        this.data=this.$modelObject.getTpl(this.modelType+'Model');
      }
    }
  },
  beforeMount() {
    this.collectionObject=this.$modelObject.create(this.modelType+'ModelCollection');
    this.classObject=this.$modelObject.create(this.modelType+'Model')
    this.data=this.$modelObject.getTpl(this.modelType+'Model');
  },
  mounted() {

  },
  methods: {
    /**
     * 提交添加或修改数据
     */
    ok() {
      this.$refs._frm.validate(valid => {
        if (valid) {
          /* let features = this.$refs._features.getFeatures();
          let values = this.$refs._features.getValues();
          this.$set(this.data, 'values', values);
          this.$set(this.data, 'features', features); */
          this.$emit('submit', this.data);
        }
      });
    },
  }
}
</script>
